import './grid.scss';
import { cssPrefix } from '../baseData';

import React from 'react';

const { Provider, Consumer } = React.createContext({type: ''});


class Row extends React.Component{
  render(){
    let { type, className, children } = this.props;

      className = className ? className : '' ;

      className += type == 'float' ? ` ${cssPrefix}row-float` : ` ${cssPrefix}row`;

    return <div className={className}>
      <Provider value={this.props}>{children}</Provider>
    </div>
    // return <div className={className}>{children}</div>
  }
}

class Col extends React.Component{
  render(){

    return <Consumer>
      {
        (data)=>{
          let props = { ...data, ...this.props },
            { className, span, offset, type, children } = props;

          !className && (className = '');

          if(type == 'basis-auto'){
            return <div className={`${className} ${cssPrefix}col-basis-auto`}>{children}</div>;
          }

          if(type == 'float'){
            span && (className += ` ${cssPrefix}col-${span}`);
            offset && (className += ` ${cssPrefix}col-offset-${offset}`);
            return <div className={className}>{children}</div>
          }

          return <div className={`${className} ${cssPrefix}col`} style={{flexGrow: span}}>{children}</div>
        }
      }
    </Consumer>

  }
}

module.exports = {
  Row,
  Col
}